package myJs.cps.myTable

import myJs.cps.{PureDatePickerCp, PureInputCp, Style}
import myJs.myPkg.reactHookForm.UseFormRT
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

/**
 * Created by yz on 21/1/2022
 */
@react object NumericSearchLiCp {

  case class Props(useForm: UseFormRT,
                   min: String, minChange: String => Unit, max: String, maxChange: String => Unit)

  val component = FunctionalComponent[Props] { props =>

    li(className := "myLi myInputLi dateInput",
      div(style := Style(marginBottom = 10),
        span(className := "fa fa-filter"),
        s" Range"
      ),
      div(style := Style(marginBottom = 10), className := "form-group",
        div(className := "col-sm-12",
          PureInputCp(useForm = props.useForm, name = "min", value = props.min, placeHolder = "Min",
            onChange = props.minChange)
        )
      ),
      div(className := "form-group",
        div(className := "col-sm-12",
          PureInputCp(useForm = props.useForm, name = "max", value = props.max, placeHolder = "Max",
            onChange = props.maxChange)
        )
      ),
    )

  }

}
